<template>
  <!-- 待处理线索详情页 / 已处理线索详情页 -->
  <view class="clueDetails">
    <view class="wrapper" :class="options.index == 0 ? 'wrapperHeight' : ''">
      <view class="wrapper-item">
        <view class="time-title">
          <image :src="baseImgUrl + 'tcircle.png'"></image>
          <view>{{ detail.createTime }}</view>
        </view>

        <view class="clue-line">
          <view class="clue-content">
            <view class="clue-title">{{ detail.riskTitle }}</view>
            <view class="clue-context">
              <view style="min-width: 120rpx; margin-left: 0; color: #a2a2a2">隐患类型:</view>
              <view>{{
                get_dict_type(risk_type, detail.riskType)
              }}</view>
            </view>
            <view class="clue-context">
              <view style="min-width: 120rpx; margin-left: 0; color: #a2a2a2">发现时间:</view>
              <view>{{ detail.discoveryTime }}</view>
            </view>
            <view class="clue-context">
              <view style="min-width: 120rpx; margin-left: 0; color: #a2a2a2">线索地点:</view>
              <view>{{ detail.discoverySite }}</view>
            </view>
            <view class="clue-context">
              <view style="min-width: 120rpx; margin-left: 0; color: #a2a2a2">上报单位:</view>
              <view>{{ detail.policeAgencyName }}</view>
            </view>
            <view class="clue-context">
              <view style="min-width: 120rpx; margin-left: 0; color: #a2a2a2">隐患描述:</view>
              <view>{{ detail.riskDescription }}</view>
            </view>
            <view class="clue-context" style="display: flex">
              <view style="min-width: 120rpx; margin-left: 0; color: #a2a2a2">隐患图片:</view>
              <view class="picture" v-if="imageList.length">
                <image v-for="(img, imgIndex) in imageList" :key="imgIndex" :src="imgPrefix + img" mode="aspectFill"
                  @click="pvwImage([imgPrefix + img])"></image>
              </view>
              <view v-else>无</view>
            </view>
            <view class="clue-context" v-if="audioSrc" style="align-items: center;">
              <view style="min-width: 120rpx; margin-left: 0; color: #a2a2a2">音频信息:</view>
              <yy-play-audio-detail v-if="audioSrc" :audio-src="audioSrc" style="flex: 1"></yy-play-audio-detail>
            </view>
          </view>
        </view>
      </view>

      <view class="wrapper-item" v-if="detail.handleStatus >= 1 && detail.claimStatus == 2">
        <view class="time-title">
          <image :src="baseImgUrl + 'tcircle.png'"></image>
          <view>{{ detail.claimTime }}</view>
        </view>

        <view class="clue-line">
          <view class="clue-content">
            <view class="clue-title">处理民警</view>
            <view class="clue-context">
              民警姓名:<view>{{ detail.policeName }}</view>
            </view>
            <view class="clue-context">
              民警警号:<view>{{ detail.policeUserNo }}</view>
            </view>
            <view class="clue-context">
              联系电话:<view>{{ detail.policeMobile }}</view>
            </view>
          </view>
        </view>
      </view>

      <view class="wrapper-item" v-if="detail.handleStatus == 2 && detail.claimStatus == 2">
        <view class="time-title">
          <image :src="baseImgUrl + 'tcircle.png'"></image>
          <view>{{ detail.updateTime }}</view>
        </view>

        <view class="clue-line">
          <view class="clue-content">
            <view class="clue-title">排查详情</view>
            <view class="clue-context">
              处理时间:<view>{{ detail.processingTime ? moment(detail.processingTime).format("YYYY/MM/DD HH:mm") : "" }}
              </view>
            </view>
            <view class="clue-context">
              <view style="min-width: 120rpx; margin-left: 0; color: #a2a2a2">处理措施:</view>
              <view>{{ detail.policeHandleMemo }}</view>
            </view>
            <view class="clue-context">
              是否移交:<view>{{
                detail.transferStatus == 1 ? "是" : "否"
              }}</view>
            </view>
            <view class="clue-context" v-if="detail.transferStatus == 1">
              接收单位:<view>{{ detail.transferDepartment }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="btns" v-if="options.index == 0">
      <button class="remove-btn" type="primary" style="width: 100%" @click="detailHandle">
        删除
      </button>
    </view>
  </view>
</template>

<script>
  import {
    risk_detail,
    risk_delete
  } from "@/api/home.js";
  import {
    ajaxGetDictItems
  } from "@/api/api.js";
  import {
    imagesPathList
  } from "@/api/myself.js";
  import {
    handleClickRouter,
    Toast,
    navBack,
    pvwImage,
    formatters,
  } from "@/utils/util.js";
  import moment from "../../utils/moment";

  export default {
    name: "clueDetails",
    data() {
      return {
        baseImgUrl: this.$baseImgUrl,
        baseURL: this.$baseURL,
        imgPrefix: uni.getStorageSync("imgPrefix"),
        options: {},
        detail: {},
        imageList: [],
        risk_type: [],
        audioSrc: null
      };
    },
    onLoad(options) {
      this.options = JSON.parse(decodeURIComponent(options.data));

      if (this.options.index != 0) {
        uni.setNavigationBarTitle({
          title: "已处理隐患详情页",
        });
      }
      this.getList();
    },
    methods: {
      handleClickRouter,
      navBack,
      pvwImage,
      formatters,
      moment,
      detailHandle() {
        uni.showModal({
          title: "删除",
          content: "删除后不可恢复，请谨慎操作！",
          confirmColor: "#2488F5",
          success: (res) => {
            if (res.confirm) {
              risk_delete({
                id: this.options.id
              }).then((res) => {
                if (res.code == 200) {
                  Toast("删除成功");
                  uni.setStorageSync("risk", true);
                  navBack();
                  return;
                }
                Toast(res.message);
              });
            }
          },
        });
      },

      async getList() {
        let {
          result
        } = await risk_detail({
          id: this.options.id
        });
        this.detail = result;

        const {
          hiddenDangerReportingAudio
        } = result
        if (hiddenDangerReportingAudio) {
          this.audioSrc = this.imgPrefix + hiddenDangerReportingAudio;
        }

        let {
          result: imgPath
        } = await imagesPathList({
          bizId: this.options.id,
          bizType: 24,
        });
        this.imageList = imgPath.map((v) => v.path);

        let {
          result: risk_type
        } = await ajaxGetDictItems({
          code: "risk_type"
        });
        this.risk_type = risk_type;
      },

      get_dict_type(list, type) {
        let res = list.find((item) => item.value == type);
        if (res && res.title) {
          return res.title;
        } else {
          return "暂无";
        }
      },
    },
  };
</script>

<style>
  page {
    background-color: #f3f3f3 !important;
    height: 100%;
  }
</style>
<style lang="scss" scoped>
  .clueDetails {
    flex: 1;
    background: #f9f9f9;

    .wrapper {
      margin: 20rpx;
      overflow-y: auto;

      .wrapper-item {
        padding: 20rpx;
      }
    }

    .wrapperHeight {
      height: calc(100vh - 92px);
    }

    .time-title {
      display: flex;
      align-items: center;
      font-size: 28rpx;
      font-weight: 500;
      color: #333333;

      image {
        margin-right: 15rpx;
        width: 20rpx;
        height: 20rpx;
      }
    }

    .clue-line {
      margin-left: 9rpx;
      border-left: 1rpx dotted #b2b2b2;
      padding-left: 16rpx;

      .clue-content {
        margin-top: 10rpx;
        padding: 20rpx 30rpx;
        background: #fff;

        .clue-title {
          font-weight: bold;
          font-size: 32rpx;
          color: #000000;
        }

        .clue-context {
          display: flex;
          margin-top: 24rpx;
          font-weight: 400;
          font-size: 26rpx;
          color: #a2a2a2;

          view {
            font-weight: 500;
            font-size: 26rpx;
            color: #1a1a1a;
            margin-left: 10rpx;
          }
        }

        .picture {
          display: flex;
          flex-wrap: wrap; // zry

          image {
            display: block;
            margin-right: 9rpx;
            width: 192rpx;
            height: 216rpx;
          }

          &:nth-of-type(1) {
            margin-left: 10rpx;
          }

          image:nth-child(3n) {
            margin-right: 0;
          }
        }
      }
    }

    .btns {
      button {
        border-radius: 44rpx;
      }
    }
  }
</style>